<template>
    <!--中间内容-->
    <div class="admin-login-center-box">
      <div class="center login-center-box">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form label-position="right" label-width="100px">
              <el-form-item label="账号" required>
                <el-input v-model="user.userName" placeholder="用户名"></el-input>
              </el-form-item>
              <el-form-item label="密码" required>
                <el-input v-model="user.password" placeholder="请输入密码" type="password"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary"  class="login-button" @click="doLogin"> 登 录 </el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </div>
</template>

<script>
  export default {
    name: "index.vue",
    data(){
      return{
        user:{
          userName:'admin',
          password:'123456'
        },
        verifyCode:'',
        captchaPath:'',
        captcha_key:''
      }
    },

    methods:{
      doLogin(){
        let _this = this
        //判断数据
        if(this.user.userName === ''){
          this.$message.error("请输入用户名");
          return;
        }
        if(this.user.password === ''){
          this.$message.error("请输入密码");
          return;
        }
        this.$axios.post('/users/login', {
           username:_this.user.userName,
           password:_this.user.password
        }).then(resp => {
          if(resp.code === 200 || resp.success === true){
            this.$message.success(resp.msg || resp.message || "登录成功");
            _this.$store && _this.$store.commit && _this.$store.commit('login', _this.user)
            // 登录成功后将 userId 单独存入 localStorage
            let userObj = Object.assign({}, _this.user);
            if (resp.data && resp.data.userId) {
              userObj.userId = resp.data.userId;
            }
            window.localStorage.setItem('user', JSON.stringify(userObj))
            // 登录成功后拉取菜单，参数用 _this.user.userName
            _this.$axios.get(`/users/menus?username=${_this.user.userName}`).then(menuResp => {
              if(menuResp.code === 200 || menuResp.success === true){
                _this.$store.commit('initAdminMenu', menuResp.data)
              }else{
                _this.$message.error(menuResp.message || menuResp.msg || '菜单加载失败');
              }
              var path = _this.$route.query.redirect
              _this.$router.push({path: path === '/' || path === undefined ? '/admin' : path})
            }).catch(err => {
              _this.$message.error('菜单接口异常');
              var path = _this.$route.query.redirect
              _this.$router.push({path: path === '/' || path === undefined ? '/admin' : path})
            })
          }else {
            console.log('登录失败响应:', resp);
            this.$message.error(resp.message || resp.msg || '登录失败');
          }
        }).catch(err => {
          this.$message.error(err.message || '网络错误');
        })
      },
      updateVerifyCode(){}
    },
    mounted() {
      this.captcha_key = ''
    },
  }
</script>

<style scoped>

  .admin-login-header-box{
    width: 100%;
    height: 46px;
    background-color: dodgerblue;
  }

  .admin-login-header-center{
    line-height: 46px;
    margin: 0 auto;
    width: 1140px;
  }

  .admin-login-logo{
    width: 200px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
  }

  /*.login-center-box{*/
  /*  margin: 0 auto;*/
  /*  margin-top: 30px;*/
  /*  border-radius: 5px;*/
  /*  padding: 20px;*/
  /*  width: 1100px;*/
  /*  height: 400px;*/
  /*  background-color: #fff;*/
  /*  box-shadow: 0 1px 10px 0 #afafaf;*/
  /*}*/

  .login-center-box .el-input{
    width: 55%;
    float: left;
  }

  .captcha-code{
    cursor: pointer;
    vertical-align: middle;
    margin-left: 10px;
    border:solid 1px #E6E6E6;
    width: 120px;
    padding-left: 10px;
    padding-right: 10px;
    height: 40px;
  }


  .login-button{
    margin-bottom: 0;
    float: left;
  }



  /*.login-center-box .el-input{*/
  /*  width: 200px;*/
  /*}*/

  /*.el-form-item .login-center-box{*/
  /*  border-radius: 4px;*/
  /*  width: 1100px;*/
  /*  padding: 20px;*/
  /*  background-color: #fff;*/
  /*}*/

  /*.el-form-item .el-input__inner{*/
  /*  border:solid 1px #E6E6E6;*/
  /*  height: 42px;*/
  /*  border-radius: 0;*/
  /*}*/

  /*.el-form-item__label{*/
  /*  background-color: aliceblue;*/
  /*  border-left: solid 1px #e6e6e6;*/
  /*  border-top: solid 1px #e6e6e6;*/
  /*  border-bottom: solid 1px #e6e6e6;*/
  /*  text-align: center;*/
  /*}*/


</style>
